<template>
    <div>
        <div class="map-view" id="container">
            <div class="top-tab-view">
                <div class="tab-item" @click="getWorkSiteList">
                    <span class="tab-title">工地</span>
                    <span class="tab-number">{{ mapMarkCntStat.buildingSiteCnt }}</span>
                    <span class="tab-unit">个</span>
                </div>
                <div class="tab-item not-first" @click="getDisposalSiteList">
                    <span class="tab-title">消纳场</span>
                    <span class="tab-number">{{ mapMarkCntStat.disposalSiteCnt }}</span>
                    <span class="tab-unit">个</span>
                </div>
                <div class="tab-item not-first" @click="getVehicleList">
                    <span class="tab-title">车辆</span>
                    <span class="tab-number">{{ mapMarkCntStat.vehicleCnt }}</span>
                    <span class="tab-unit">辆</span>
                </div>
                <div class="tab-item not-first" @click="getNewApprovedLine">
                    <span class="tab-title">路线</span>
                    <span class="tab-number">{{ mapMarkCntStat.lineCnt }}</span>
                    <span class="tab-unit">条</span>
                </div>
            </div>
        </div>

        <div ref="redMarker">
            <red-marker></red-marker>
        </div>

        <div ref="yellowMarker">
            <yellow-marker></yellow-marker>
        </div>

        <window-info ref="windowInfo"></window-info>

        <work-site-info-window ref="workSiteInfoWindow"></work-site-info-window>

        <disposal-site-info-window ref="disposalSiteInfoWindow"></disposal-site-info-window>

        <vehicle-info-window ref="vehicleInfoWindow"></vehicle-info-window>

    </div>
</template>

<script>
import MapLoader from '../../plugins/amap'
import RedMarker from './redMarker'
import YellowMarker from './yellowMarker'
import WindowInfo from './windowInfo'
import { vehicleMonitorMapMarkCntStat } from '../../api/vehicleMonitor'
import { buildingSiteQueryAllMapSite } from '../../api/buildingSite'
import WorkSiteInfoWindow from './workSiteInfoWindow'
import { disposalSiteQueryAllMapMarkSet } from '../../api/disposalSite'
import DisposalSiteInfoWindow from './disposalSiteInfoWindow'
import { disposalCertLineQueryNewApprovedLine } from '../../api/disposalCertLine'
import { queryVehicleList } from '../../api/vehicle'
import VehicleInfoWindow from './vehicleInfoWindow'

export default {
    name: 'centerChart',
    components: { VehicleInfoWindow, DisposalSiteInfoWindow, WorkSiteInfoWindow, WindowInfo, YellowMarker, RedMarker },
    data () {
        return {
            map: null,
            mapMarkCntStat: {
                vehicleCnt: 0,
                buildingSiteCnt: 0,
                disposalSiteCnt: 0,
                lineCnt: 0
            },
            workSiteList: [],
            newApprovedLines: [],
            disposalSiteList: [],
            vehicleList: []
        }
    },
    methods: {
        initMap () {
            MapLoader().then(AMap => {
                console.log('地图加载成功')
                this.map = new AMap.Map("container", {
                    resizeEnable: true,
                    mapStyle: "amap://styles/darkblue"
                })
                this.map.setCenter([116.108624, 38.994825])
                this.setMarker()
            }, e => {
                console.log('地图加载失败', e)
            })
        },
        setMarker () {
            let lnglat = [116.108624, 38.994825]
            this.map.clearMap()
            this.addMarker('red', [116.608624, 38.594825])
            this.addMarker('yellow', [116.108624, 38.594825])
            this.map.setZoomAndCenter(lnglat)
        },
        addMarker (type, lnglat) {
            const types = {
                yellow: () => {
                    return new AMap.Marker({
                        position: lnglat,
                        content: this.$refs['yellowMarker']
                    })
                },
                red: () => {
                    return new AMap.Marker({
                        position: lnglat,
                        content: this.$refs['redMarker']
                    })
                }
            }
            const marker = types[type]()
            marker.on("click", (e) => {
                this.showInfoWindow(e, {})
            })
            this.map.add(marker)
        },
        showInfoWindow (e, item) {
            const windowInfo = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['windowInfo'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(285, 65)
            })
            // 信息窗口打开
            this.$refs['windowInfo'].open()
            windowInfo.open(this.map, e.target.getPosition())
        },
        getMapMarkCntStat () {
            const param = {}
            vehicleMonitorMapMarkCntStat(param).then(response => {
                console.log(response)
                this.mapMarkCntStat = response.data.data
            }).catch(error => {
                console.log(error)
            })
        },
        getWorkSiteList () {
            const param = {}
            console.log(param)
            buildingSiteQueryAllMapSite(param).then(response => {
                console.log(response)
                const data = response.data.data
                this.workSiteList = data.rows
                this.setWorkSiteListMarker()
            }).catch(error => {
                console.log(error)
            })
        },
        setWorkSiteListMarker () {
            this.map.clearMap()
            if (!this.workSiteList) { return }
            const markers = []
            for (let i = 0; i < this.workSiteList.length; i++) {
                const item = this.workSiteList[i]
                if (!item.longitude || !item.latitude) {
                    continue
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),    // 图标尺寸
                    image: '/static/img/work_site_pos_icon.svg',  // Icon的图像
                    imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
                })
                const marker = new AMap.Marker({
                    position: [item.longitude, item.latitude],
                    icon: icon,
                })
                marker.setLabel({
                    offset: new AMap.Pixel(0, 0),//设置文本标注偏移量
                    content: "<div>" + item.name + "</div>",//设置文本标注内容
                    direction: 'bottom'//设置文本标注方位
                })
                marker.on("click", (e) => {
                    this.showWorkSiteInfoWindow(e, item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            this.map.setFitView(markers)
        },
        showWorkSiteInfoWindow (e, item) {
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['workSiteInfoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['workSiteInfoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
        getDisposalSiteList () {
            const param = {}
            console.log(param)
            disposalSiteQueryAllMapMarkSet(param).then(response => {
                console.log(response)
                const data = response.data.data
                this.disposalSiteList = data.rows
                this.setDisposalSiteListMarker()
            }).catch(error => {
                console.log(error)
            })
        },
        setDisposalSiteListMarker () {
            this.map.clearMap()
            const markers = []
            for (let i = 0; i < this.disposalSiteList.length; i++) {
                const item = this.disposalSiteList[i]
                if (!item.longitude || !item.latitude) {
                    continue
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(30, 30),    // 图标尺寸
                    image: '/static/img/disposal_site_pos_icon.svg',  // Icon的图像
                    imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
                })
                const marker = new AMap.Marker({
                    position: [item.longitude, item.latitude],
                    icon: icon
                })
                marker.setLabel({
                    offset: new AMap.Pixel(0, 0),//设置文本标注偏移量
                    content: "<div>" + item.name + "</div>",//设置文本标注内容
                    direction: 'bottom'//设置文本标注方位
                })
                marker.on("click", (e) => {
                    this.showDisposalSiteInfoWindow(e, item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            this.map.setFitView(markers)
        },
        showDisposalSiteInfoWindow (e, item) {
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['disposalSiteInfoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['disposalSiteInfoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
        getNewApprovedLine () {
            const param = {
                lineCnt: this.mapMarkCntStat.lineCnt
            }
            disposalCertLineQueryNewApprovedLine(param).then(response => {
                this.newApprovedLines = response.data.data.rows
                this.setLines()
            }).catch(error => {
                console.log(error)
            })
        },
        setLines () {
            this.map.clearMap()
            for (let line of this.newApprovedLines) {
                this.setLine(line)
            }
        },
        setLine (line) {
            const path = []
            for (let item of line.pointSet) {
                path.push([item.lng, item.lat])
            }
            this.setStartMarker(line, path)
            this.setEndMarker(line, path)
            // 绘制轨迹
            const polyline = new AMap.Polyline({
                map: this.map,
                path: path,
                showDir: true,
                strokeColor: this.getRandomColor(),  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            })
            this.map.setFitView()
        },
        setStartMarker (line, path) {
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/work_site_pos_icon.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[0],
                icon: icon,
                offset: new AMap.Pixel(-26, -13),
            })
            marker.setLabel({
                offset: new AMap.Pixel(0, 0),//设置文本标注偏移量
                content: "<div>" + line.startPlace + "</div>",//设置文本标注内容
                direction: 'bottom'//设置文本标注方位
            })
        },
        setEndMarker (line, path) {
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: '/static/img/disposal_site_pos_icon.svg',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            })
            const marker = new AMap.Marker({
                map: this.map,
                position: path[path.length - 1],
                icon: icon,
                offset: new AMap.Pixel(-26, -13),
            })
            marker.setLabel({
                offset: new AMap.Pixel(0, 0),//设置文本标注偏移量
                content: "<div>" + line.endPlace + "</div>",//设置文本标注内容
                direction: 'bottom'//设置文本标注方位
            })
        },
        getRandomColor () {
            return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
        },
        getVehicleList () {
            const param = {}
            queryVehicleList(param).then(response => {
                this.vehicleList = response.data.data.rows
                const markers = this.addVehicleMonitoringMarkers()
                this.map.setFitView(markers)
            }).catch(error => {
                console.log(error)
            })
        },
        addVehicleMonitoringMarkers () {
            this.map.clearMap()
            const iconMap = {
                green: "/static/img/car_icon.svg",
                red: "/static/img/car_red_icon.svg",
                gray: "/static/img/car_gray_icon.svg"
            }
            if (!this.vehicleList) {
                return
            }
            const markers = []
            for (let item of this.vehicleList) {
                let iconImage
                if (item.onlineStatus === 'ONLINE') {
                    iconImage = iconMap.green
                }
                // else if (item.onlineStatus === 'ONLINE' && item.alertStatus === 'ALERT'){
                //     iconImage = iconMap.red
                // }
                else if (item.onlineStatus === 'OFFLINE') {
                    iconImage = iconMap.gray
                } else {
                    iconImage = iconMap.gray
                }
                // 创建 AMap.Icon 实例：
                const icon = new AMap.Icon({
                    size: new AMap.Size(25, 25),    // 图标尺寸
                    image: iconImage,  // Icon的图像
                    imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
                })
                const marker = new AMap.Marker({
                    icon: icon,
                    position: [item.lgt, item.lat],
                })
                marker.setLabel({
                    offset: new AMap.Pixel(0, 0),//设置文本标注偏移量
                    content: "<div>" + item.plateNo + "</div>",//设置文本标注内容
                    direction: 'bottom'//设置文本标注方位
                })
                marker.on("click", (e) => {
                    this.showVehicleInfoWindow(e, item)
                    // this.addPath()
                })
                this.map.add(marker)
                markers.push(marker)
            }
            return markers;
        },
        showVehicleInfoWindow (e, item) {
            const infoWindow = new AMap.InfoWindow({
                // 使用自定义窗体
                isCustom: true,
                // 只有当组件渲染完毕后，通过$el才能拿到原生的dom对象
                content: this.$refs['vehicleInfoWindow'].$el,
                // 设置定位偏移量
                offset: new AMap.Pixel(-9, -60)
            })
            // 信息窗口打开
            this.$refs['vehicleInfoWindow'].open(item)
            infoWindow.open(this.map, e.target.getPosition())
        },
    },
    mounted () {
        this.initMap()
        this.getMapMarkCntStat()
    },
    beforeDestroy () {
        this.map.destroy()
        this.map = null
    },
}
</script>

<style scoped lang="scss">
.map-view {
    width: 100vw;
    height: 100vh;
    /*    z-index: 0;*/
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.top-tab-view {
    width: 800px;
    height: 100px;
    z-index: 1;

    .tab-item {
        width: 185px;
        height: 51px;
        background: url("/static/img/map_tab_item.png") no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .tab-title {
            font-size: 16px;
            color: #FFFFFF;
            font-weight: bolder;
        }

        .tab-number {
            color: #FED52F;
            font-weight: bolder;
            font-size: 24px;
            margin-left: 10px;
        }

        .tab-unit {
            color: #FED52F;
            font-size: 14px;
            margin-left: 5px;
        }
    }

    .not-first {
        margin-left: 10px;
    }
}
</style>
